<template>
    <div style="display: flex;align-items: center;white-space: nowrap;">
        <span >{{i18n('modals','模态窗口')}}：</span>
        <div style="height: 40px;display: flex;align-items: center;">
            <a-checkbox v-model="localConfig.model"></a-checkbox>
        </div>
        <span style="padding-left:20px;">{{i18n('size','大小')}}：</span>
        <div style="height: 40px;display: flex;align-items: center;">
            <a-radio-group v-model="localConfig.isMax"  :options="sizeOptions"></a-radio-group>
        </div>

        <template v-if="localConfig.isMax=='NO'">
            <span >{{i18n('width','宽')}}：</span>
            <div style="padding:0 10px;width: 100px;">
                <a-input-number v-model="localConfig.width"></a-input-number>
            </div>
            <span>{{i18n('high','高')}}：</span>
            <div style="padding:0 10px;width: 100px;">
                <a-input-number v-model="localConfig.height"    ></a-input-number>
            </div>
        </template>
    </div>
</template>

<script>
export default {
    name: "OpenMode",
    props:{
        localConfig:{
            type: Object,
            default:()=>{
                return {
                    model:false,
                    isMax:"YES",
                    width:800,
                    height:600
                }
            }
        }
    },
    data(){
        return {
            sizeOptions:[
                {label:this.i18n('fullScreen','全屏'),value:"YES"},
                {label:this.i18n('custom','自定义'),value:"NO"}
            ]
        }
    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"openMode",key);
        },
    }
}
</script>

<style scoped>

</style>